<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
	<title>SWT GridLayout</title>
	<link href="../../../book.css" rel="stylesheet" type="text/css">
</head>

<body>
<h1>SWT GridLayout</h1>
<table border="0" width="800" cellspacing="0" cellpadding="0">
	<tr>
		<td><b>GridLayout</b> lays out the control children of a Composite in a 
		grid. <b>GridLayout</b> has a number of configuration fields, and the 
		controls it lays out can have an associated layout data object, called
		<b>GridData</b>. The power of <b>GridLayout</b> lies in the ability to 
		configure <b>GridData</b> for each control in the layout. The <b>
		numColumns</b> field is the most important field in a <b>GridLayout</b>. 
		Widgets are laid out in columns from left to right, and a new row is 
		created when <b>numColumns + 1</b> controls are added to the Composite.<ul>
		<li><a href="#MainFeatures">Main Features</a></li>
		<li><a href="#PopupHeaderMenu">Popup Header Menu</a></li>
		<li><a href="#GraphicalFeedback">Graphical Feedback</a></li>
		<li><a href="#CellEditing">Cell Editing</a></li>
		<li><a href="#Preferences">Preferences</a></li>
		<li><a href="#SourceCodeGenerationParsing">Source Code Generation &amp; 
		Parsing</a></li>
	</ul>
    <p></p>
<h2><a name="MainFeatures"></a>Main Features</h2>
            <ul>
              <li>Select <b>GridLayout</b> from the <b>Layouts</b> palette and 
				drop it on a Window or Composite</li>
            </ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_design_view.gif" width="708" height="454"></p>
</blockquote>
<ul>
				<li>Graphical feedback is provided for all column, row and cell 
				interactions</li>
				<li>Column and row properties may be changed via a popup menu</li>
				<li>Convert existing layouts (null, <b>FormLayout</b>, etc.) to <b>
				GridLayout</b> with intelligent column and row creation</li>
            </ul>
<blockquote>
	<p><img border="0" src="images/null_convert.gif">
	<img border="0" src="images/gl_convert.gif"></p>
</blockquote>
            <h2><a name="PopupHeaderMenu"></a>Popup Header Menu</h2>
            <ul>
              <li>Right-click on the header area to access the popup header menu</li>
            </ul>
<blockquote>
&nbsp;<img border="0" src="images/gl_menu_row.gif" align="top" width="170" height="154">&nbsp;
	&nbsp;
	<img border="0" src="images/gl_menu_column.gif" width="170" height="154"></blockquote>
<ul>
				<li>Delete entire columns or rows</li>
				<li>Set the column alignment to left, center, right or fill</li>
				<li>Set the row alignment to top, center, bottom or fill</li>
				<li>Specify that the column or row should grab any excess space</li>
            </ul>
          <p></p>
            <h2><a name="GraphicalFeedback"></a>Graphical Feedback</h2>
            <ul>
              <li>When moving a widget or adding a new widget, open cells are 
				highlighted green while populated cells are highlighted red and 
				insertion points are highlighted in yellow<br>
				<br>
				<img border="0" src="images/gl_add1.gif">
				<img border="0" src="images/gl_add2.gif">
				<img border="0" src="images/gl_add3.gif"><br>
&nbsp;</li>
				<li>Phantom drop point to the right and below the current cells 
				will create new columns, rows and gaps as needed<br>
				<br>
				<img border="0" src="images/gl_move1.gif">
				<img border="0" src="images/gl_move2.gif"></li>
            </ul>
<ul>
	<li>The currently selected cell shows its column and row spanning handles, 
	sizing handles and alignment handles<p>
	<img border="0" src="images/gl_alignment_one.gif"></li>
</ul>
<ul>
	<li>Set the alignment of a cell using its popup alignment menu or the 
	toolbar</li>
</ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_toolbar.gif"></p>
	<p>
	<img border="0" src="images/gl_cell_align1.gif">
	<img border="0" src="images/gl_cell_align2.gif"></p>
</blockquote>
<ul>
	<li>Set the grab property by right-clicking (or double-clicking) on a column or row</li>
</ul>
<blockquote>
	<p><img border="0" src="images/gl_grab1.gif">
	<img border="0" src="images/gl_grab2.gif" align="top"></p>
</blockquote>
<ul>
              <li>Width and height sizing handles make it easy to set the size 
				of a widget</li>
            </ul>
		<blockquote>
			<p>
			<img border="0" src="images/gl_sizing1.gif" width="314" height="248">
			<img border="0" src="images/gl_sizing2.gif" align="top" width="314" height="249"></p>
		</blockquote>
		<ul>
              <li>Right-click a widget to set is horizontal or vertical 
				alignment values, grab property or to clear its width or height 
				hint</li>
            </ul>
		<blockquote>
			<p>
			<img border="0" src="images/gl_clear_span.gif" width="328" height="146"></p>
		</blockquote>
		<ul>
              <li>Reorder columns and rows by dragging them (with their 
				associated gap columns or rows)</li>
            </ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_reorder_row1.gif">
	<img border="0" src="images/gl_reorder_row2.gif">
	<img border="0" src="images/gl_reorder_row3.gif"></p>
</blockquote>
<ul>
              <li>Column and rows borders are indicated with gray lines</li>
            </ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_borders.gif" align="top"></p>
</blockquote>
<ul>
              <li>Interactive column and row spanning feedback is provided</li>
            </ul>
<blockquote>
	<p><img border="0" src="images/gl_span1.gif">
	<img border="0" src="images/gl_span2.gif"></p>
</blockquote>
<ul>
	<li>Full keyboard support for quickly changing alignment values</li>
</ul>
<blockquote>
	<table border="0" cellpadding="0" cellspacing="0" id="table1" width="421">
		<tr>
			<td colspan="3" bgcolor="#C0C0C0">&nbsp;Cells</td>
		</tr>
		<tr>
			<td>F</td>
			<td width="10">&nbsp;</td>
			<td>fill horizontal</td>
		</tr>
		<tr>
			<td>Shift+F</td>
			<td width="10">&nbsp;</td>
			<td>fill vertical</td>
		</tr>
		<tr>
			<td>H</td>
			<td width="10">&nbsp;</td>
			<td>grow horizontal</td>
		</tr>
		<tr>
			<td>V</td>
			<td width="10">&nbsp;</td>
			<td>grow vertical</td>
		</tr>
		<tr>
			<td>L, C, R</td>
			<td width="10">&nbsp;</td>
			<td>left/center/right for horizontal</td>
		</tr>
		<tr>
			<td>T, M, B</td>
			<td width="10">&nbsp;</td>
			<td>top/middle/bottom for vertical</td>
		</tr>
		</table>
</blockquote>
<h2><a name="CellEditing"></a>Cell Editing</h2>
              <ul>
				<li>Floating layout assistant
	<img border="0" src="images/assistant.gif" width="16" height="16" align="top"></li>
              </ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_layout_assistant1.gif">
	<img border="0" src="images/gl_layout_assistant2.gif" width="285" height="238"></p>
</blockquote>
<ul>
	<li>Edit individual layout data properties for each widget in the <b>
				<a href="../../../com.instantiations.designer.doc.user/html/userinterface/property_pane.html">Property Pane</a></b>.</li>
</ul>
<blockquote>
	<p>
	<img border="0" src="images/gl_properties.gif" align="top">&nbsp;
	</p>
</blockquote>
              <h2><br>
				<a name="Preferences" href="../../preferences/swt/preferences_gridlayout.html">Preferences</a></h2>
              <ul>
				<li>Control whether automatic grab is used for text widgets, 
				comboboxes, tables, etc.</li>
              </ul>
		<blockquote>
			<p>
	<img border="0" src="images/gl_auto_grab1.gif" align="top">&nbsp;
	<img border="0" src="images/gl_auto_grab2.gif" align="top"></p>
		</blockquote>
		<ul>
				<li>Control whether labels are automatically right-aligned when 
				next to a text widget</li>
              </ul>
              <blockquote>
				<p>
	<img border="0" src="images/gl_auto_right_label1.gif" align="top">&nbsp;
	<img border="0" src="images/gl_auto_right_label2.gif" align="top"></p>
		</blockquote>
              <h2><a name="SourceCodeGenerationParsing"></a>Source Code 
				Generation &amp; Parsing</h2>
              <ul>
                <li>Intelligently convert existing layouts (null, <b>FormLayout</b>, etc.) to 
				<b>GridLayout</b> with column and row creation</li>
				<li>Parser can understand long or short constructor style for 
				<b>GridData</b></li>
              </ul>
<blockquote>
				<p>
				<img border="0" src="images/gl_source1.gif">&nbsp;</p>
</blockquote>
		</td>
	</tr>
</table>
</body>
</html>